<template>
  <div>
    <!--无限滚动-->
    <div class="list-scroll">
      <!--走马灯 遍历api的第一页的前4个-->
      <el-carousel height="150px">
        <el-carousel-item v-for="item in scrolls">
          <el-link :href="item.url">
            <el-image :src="item.pic ? item.pic : item.img"></el-image>
          </el-link>
        </el-carousel-item>
      </el-carousel>

      <!--展示api的标题-->
      <ul v-infinite-scroll="load" infinite-scroll-disabled="disabled">
        <li v-for="i in infos">
          <el-link class="list-url" @click="list(i)">
            <span>
             {{ i.title }}
           </span>
          </el-link>
        </li>
      </ul>
      <p v-if="loading">加载中...</p>
    </div>

    <!--回到顶部-->
    <el-backtop target=".list-scroll" :bottom="120">
      <div class="list-return">
        UP
      </div>
    </el-backtop>

    <el-dialog :visible.sync="visible" width="90%" top="20px">
      <iframe :src="url" style="height: 660px;" width="100%"></iframe>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "List",
  props: {
    information: String
  },
  data() {
    return {
      loading: false,
      infos: Array,
      scrolls: Array,
      a: 2,
      url: 'https://www.baidu.com/',
      visible: false
    }
  },
  computed: {
    disabled() {
      return this.loading
    },
  },
  mounted() {
    //初始化无限滚动的数据
    if (this.information !== "qq") {
      this.$jsonp(this.information + 'page=1')
          .then(json => {
            this.infos = json.result.data
            this.scrolls = [this.infos[0], this.infos[1], this.infos[2], this.infos[3]]
          })
    } else {
      this.$http
          .get("https://i.news.qq.com/trpc.qqnews_web.kv_srv.kv_srv_http_proxy/list?sub_srv_id=24hours&srv_id=pc&offset=" + 0 + "&limit=10&strategy=1&ext={%22pool%22:[%22top%22],%22is_filter%22:7,%22check_type%22:true}")
          .then(json => {
            this.infos = json.data.data.list
            this.scrolls = [this.infos[0], this.infos[1], this.infos[2], this.infos[3]]
          })
    }


  },
  methods: {
    // 将获取到的数据叠加在无限滚动上
    load() {
      this.loading = true
      if (this.information !== "qq") {
        setTimeout(() => {
          this.$jsonp(this.information + 'page=' + this.a)
              .then(json => {
                for (let i = 0; i < 10; i++) {
                  this.infos.push(json.result.data[i])
                }
              })
          this.a++;
          this.loading = false
        }, 2000)
      } else {
        setTimeout(() => {
          this.$http
              .get("https://i.news.qq.com/trpc.qqnews_web.kv_srv.kv_srv_http_proxy/list?sub_srv_id=24hours&srv_id=pc&offset=" + this.a * 10 + "&limit=10&strategy=1&ext={%22pool%22:[%22top%22],%22is_filter%22:7,%22check_type%22:true}")
              .then(json => {
                for (let i = 0; i < 10; i++) {
                  this.infos.push(json.data.data.list[i])
                }
              })
          this.a++;
          this.loading = false
        }, 2000)
      }

    },
    list(i) {
      this.url = i.url;
      this.visible = true;
    }
  }
}
</script>

<style scoped lang="less">
.list-scroll {
  overflow: auto;
  height: 565px;
}

ul {
  padding-left: 0px;
}

li {
  list-style-type: none;
}

li:nth-child(odd) {
  background: #99a9bf;
}

li:nth-child(even) {
  background: #f2f5f6;
}

.list-url {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 20px;

  span {
    color: #000;
  }
}


.list-return {
  height: 100%;
  width: 100%;
  background-color: #f2f5f6;
  box-shadow: 0 0 6px rgba(0, 0, 0, .12);
  text-align: center;
  line-height: 40px;
  color: #1989fa;
}
</style>
